<template>
  <div class="chat-dialogue">
    <template v-if="dialogueList.length > 0">
      <cell-group :border-top="false">
        <template v-for="item in dialogueList">
          <router-link 
            :to="{
              path:'/chat/message',
              query:{
                id: item.customer_id,
                sid: item.store_id,
                goods_id: item.goods_id
              }
            }" 
            :key="item.customer_id">
            <cell
              :title="item.user_name"
              :label="(item.message instanceof Array ? item.message[0] : item.message) | messageNew"
              :date="item.add_time"
              :image="item.user_picture"
              :id="item.customer_id"
              :number="item.message_sum">
            </cell>
          </router-link>
        </template>
      </cell-group>
    </template>
    <template v-else>
      <no-info></no-info>
    </template>
  </div>
</template>

<script>
import {
  mapState,
  mapActions
} from 'vuex';

// custom components
import CellGroup from '@/components/CellGroup';
import Cell from '@/components/Cell';
import NoInfo from '@/components/NoInfo';

// mint ui
import { MessageBox } from 'mint-ui';

export default {
  name: 'chat-dialogue',
  data() {
    return {
    };
  },
  components: {
    CellGroup,
    Cell,
    MessageBox,
    NoInfo
  },
  created() {
    // 组件创建完成获取数据
    this.getDialogueList();
  },
  computed: {
    ...mapState('chat/dialogue', [
      'dialogueList'
    ])
  },
  methods: {
    ...mapActions('chat/bottomNavigator', [
      'activateChatFooterName',
      'showBottomNav'
    ]),
    ...mapActions('chat/messageBottomInput', [
      'showMessageInput'
    ]),
    ...mapActions('chat/dialogue', [
      'getDialogueList'
    ])
  },
  activated() {
    this.activateChatFooterName('dialogue');
    this.showMessageInput(false);
    this.showBottomNav(true);
  },
  watch: {
    // 如果路由有变化，执行该监听
    // '$route'() {
    //   if (this.$route.name === 'chat/dialogue') {
    //     this.getDialogueList();
    //   }
    // }
  }
};
</script>


<style lang="scss">
  @import '../../assets/style/config';
  @import '../../assets/style/mixins/common';
  .cell-group>a{
    position: relative;
    display:block;
    border-bottom: .06rem solid $border-color-split;
    &::before{
      content: " ";
      position: absolute;
      display: block;
      width: 6rem;
      height: .06rem;
      background: $write-color;
      left: 0;
      bottom: -.06rem;
    }
    &:last-of-type{
      &::before{
        background: none;
      }
      border-bottom: none;
    }
  }
</style>
